<!-- 
 重新封装ElPopconfirm
 增加以下默认配置:
 1、confirm方法延迟100ms执行，防止在tableItem中使用时会闪出下一行信息问题
 2、两次confirm执行间隔必须大于100ms，否则认为第二次confirm执行无效，防止快速点击确认按钮时连续响应两次confirm问题
-->
<template>
    <ElPopconfirm :title="title" :icon="icon" :width="width" @confirm="handleConfirm" :hide-after="hideAfter">
        <template #reference>
            <slot></slot>
        </template>
    </ElPopconfirm>
</template>

<script setup lang="ts">
import { ElPopconfirm } from 'element-plus';

withDefaults(defineProps<{
    title: string,
    icon?: string,
    width?: string,
    hideAfter?: number
}>(), {
    width: '200px',
    hideAfter: 0
})

const emit = defineEmits(['confirm'])

const CONFIRM_DELAY = 100   // 延迟执行confirm的时间，单位：毫秒
const CONFIRM_INTERVAL = 300   // 两次执行confirm的最短间隔时间，单位：毫秒

let lastHandleConfirmTime = -1  // 上次执行confirm时的时间戳

const handleConfirm = () => {
    const currTime = Date.now()
    // 判断是否满足最短间隔时间
    if (currTime - lastHandleConfirmTime > CONFIRM_INTERVAL) {
        // 若满足，则延迟指定时间后执行confirm
        setTimeout(() => {
            emit('confirm')
        }, CONFIRM_DELAY);
        lastHandleConfirmTime = currTime
    }
}

</script>

<style scoped lang="scss"></style>